<template>
  <view class="container">
    <view class="points-header bg-white border-radius shadow mb-20">
      <view class="header-content p-20">
        <view class="points-display text-center">
          <text class="points-value">{{ displayPoints }}</text>
          <text class="points-label">可用积分</text>
        </view>
        <view class="today-stats flex mt-20">
          <view class="stat-item flex-1 text-center">
            <text class="stat-value">{{ displayTodayEarned }}</text>
            <text class="stat-label">今日获得</text>
          </view>
          <view class="stat-item flex-1 text-center">
            <text class="stat-value">{{ displayAdWatchCount }}/{{ adWatchLimit }}</text>
            <text class="stat-label">观看次数</text>
          </view>
        </view>
      </view>
    </view>

    <view class="ad-section bg-white border-radius shadow mb-20">
      <view class="section-title p-20">
        <text class="title-text">看广告赚积分</text>
        <text class="title-desc">完整观看广告即可获得积分奖励</text>
      </view>

      <view class="ad-list p-20">
        <view class="ad-item" @click="goToWatchAd">
          <view class="ad-icon">📺</view>
          <view class="ad-info">
            <text class="ad-title">观看广告赚积分</text>
            <text class="ad-desc">完整观看广告获得积分奖励</text>
          </view>
          <view class="ad-reward">
            <text class="reward-text">立即观看</text>
          </view>
        </view>
      </view>
    </view>

    <view class="invite-section bg-white border-radius shadow">
      <view class="section-title p-20">
        <text class="title-text">邀请好友赚积分</text>
        <text class="title-desc">邀请好友注册使用，获得丰厚奖励</text>
      </view>

      <view class="invite-rewards p-20">
        <view class="reward-item">
          <text class="reward-title">好友注册</text>
          <text class="reward-points">+5积分</text>
        </view>
        <view class="reward-item">
          <text class="reward-title">好友首次消费</text>
          <text class="reward-points">+60积分</text>
        </view>
        <view class="reward-item">
          <text class="reward-title">好友首次充值≥50元</text>
          <text class="reward-points">+30积分</text>
        </view>
      </view>

      <view class="invite-action p-20">
        <button class="invite-btn" @click="goInvite">
          立即邀请好友
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'EarnPointsPage',
  data() {
    return {
      adWatchLimit: 20
    }
  },

  computed: {
    ...mapGetters('points', ['availablePoints', 'todayEarned', 'adWatchCount', 'canWatchAd']),

    // 确保数据有默认值
    displayPoints() {
      return this.availablePoints || 0
    },

    displayTodayEarned() {
      return this.todayEarned || 0
    },

    displayAdWatchCount() {
      return this.adWatchCount || 0
    }
  },

  onLoad() {
    this.loadData()
  },
  
  onShow() {
    // 页面显示时刷新数据，确保积分和任务状态是最新的
    this.loadData()
  },

  onPullDownRefresh() {
    this.loadData().finally(() => {
      uni.stopPullDownRefresh()
    })
  },

  methods: {
    async loadData() {
      try {
        console.log('开始加载积分数据...')
        // 同时获取积分余额和统计信息
        const results = await Promise.all([
          this.$store.dispatch('points/fetchBalance'),
          this.$store.dispatch('points/fetchStats')
        ])
        console.log('积分数据加载完成:', results)
      } catch (error) {
        console.error('加载数据失败:', error)
        uni.showToast({
          title: '加载数据失败',
          icon: 'none'
        })
      }
    },

    async goToWatchAd() {
      if (!this.canWatchAd) {
        uni.showToast({
          title: '今日观看次数已达上限',
          icon: 'none'
        })
        return
      }

      try {
        // 模拟观看广告过程
        uni.showLoading({
          title: '正在加载广告...'
        })

        // 模拟广告播放时间
        setTimeout(async () => {
          try {
            await this.$store.dispatch('points/watchAdReward')
            // 刷新数据
            await this.loadData()
          } catch (error) {
            console.error('观看广告失败:', error)
          } finally {
            uni.hideLoading()
          }
        }, 2000)

      } catch (error) {
        uni.hideLoading()
        console.error('观看广告失败:', error)
      }
    },

    goInvite() {
      uni.showToast({
        title: '功能开发中，敬请期待',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.points-header {
  .points-display {
    .points-value {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #007aff;
      margin-bottom: 8rpx;
    }

    .points-label {
      font-size: 24rpx;
      color: #666;
    }
  }

  .today-stats {
    border-top: 1rpx solid #f0f0f0;
    padding-top: 20rpx;

    .stat-item {
      .stat-value {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.section-title {
  border-bottom: 1rpx solid #f0f0f0;

  .title-text {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
  }

  .title-desc {
    font-size: 24rpx;
    color: #666;
  }
}

.ad-list {
  .ad-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .ad-icon {
      width: 80rpx;
      height: 80rpx;
      background-color: #f0f0f0;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36rpx;
      margin-right: 20rpx;
    }

    .ad-info {
      flex: 1;

      .ad-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 8rpx;
      }

      .ad-desc {
        font-size: 24rpx;
        color: #666;
      }
    }

    .ad-reward {
      .reward-text {
        font-size: 28rpx;
        color: #007aff;
        font-weight: bold;
      }
    }
  }
}

.invite-rewards {
  .reward-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .reward-title {
      font-size: 28rpx;
      color: #333;
    }

    .reward-points {
      font-size: 28rpx;
      color: #ff6b35;
      font-weight: bold;
    }
  }
}

.invite-action {
  border-top: 1rpx solid #f0f0f0;

  .invite-btn {
    width: 100%;
    height: 80rpx;
    background-color: #007aff;
    color: white;
    border-radius: 40rpx;
    font-size: 32rpx;
    border: none;
  }
}
</style>